<template>

	<view class="container">
		<image class="zhezhao" src="../../../static/zhezhao.png"></image>
		<view class="top-logo" :class="{'top-logo-background' : topLogo === 1}" :style="{ top:0,paddingTop: safeTop + 'px'}">
			<view class="logo"></view>
			
		</view>
		<swiper class="swiper" @change="change" circular :indicator-dots="false" :autoplay="true" :interval="5000"
			:duration="500">
			<swiper-item v-for="item in swipers">
				<image class="image"
					:src="item.url">
				</image>
			</swiper-item>
		</swiper>


		<view class="jianbian">
			<view class="left">
				<view class="flag">¥</view>
				<view class="num">{{prePrice}}</view>
				<view class="ding">定金</view>
				<view class="all">¥{{allPrice}}全款</view>

			</view>

			<view class="right" >
				<view v-for="item in swipers" class="point_item" 
				:class="{'select_point' : currySwiper === item.id}"
				></view>
				<!-- {{currySwiper}} -->
			</view>
		</view>

		<view class="middle">
			<view class="item">
				<view class="title">发售日历</view>
				<view class="item-logo rili"></view>
			</view>
			<view class="item">
				<view class="title">每日资讯</view>
				<view class="item-logo ziyun"></view>
			</view>
		</view>

		<view class="list">

			<scroll-view scroll-y="true" class="scroll" @scroll="scroll">
				<view class="item" v-for="item in pic" @tap="jump(item.id)">
					<image class="img" :src="item.url"></image>
					<text class="desc"> {{item.title}}</text>
					<view class="bottom">
						<view class="price">
							<text class="num">{{'¥' +  item.price}}</text>
							<image v-if="item.type === 'ding'" class="type"
								:src="baseurl + '/home/ic_ding.png'"></image>
							<image v-else class="type" :src="baseurl + '/home/ic_xian.png'"></image>
						</view>
						<view class="want">
							<text class="num">
								{{item.people +' 想要'}}
							</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

	</view>

</template>

<script setup>
	import {baseUrl} from '@/setting/const.js';
	import {
		ref
	} from 'vue';
	const baseurl = ref(baseUrl)
	import { onShow , onHide, onLoad,onPageScroll} from "@dcloudio/uni-app"
	// 获取安全区域
	const {
		safeAreaInsets
	} = uni.getSystemInfoSync()
	const safeTop = safeAreaInsets.top + 6
	const prePrice = ref(888)
	const allPrice = ref(3000)
	
	const imgurl = ref(
		baseurl.value + '/home/item.png'
	)
	const topLogo = ref(0)
	onPageScroll((e)=>{
		console.log(e);
		if(e.scrollTop >= 100){
			topLogo.value = 1
		}else{
			topLogo.value = 0
		}
		
	})
	// 轮播图图片
	const swipers = ref([
		{
			id:0,
			url : baseurl.value + '/home/home1.png'
		},
		{
			id:1,
			url : baseurl.value + '/home/home1.png'
		},
		{
			id:2,
			url : baseurl.value + '/home/home1.png'
		},
	])
	// 当前选中的轮播图
	const currySwiper = ref(swipers.value[0].id)
	const change = (e) => {
		// console.log(e.detail.current);
		currySwiper.value = e.detail.current
	}
	const pic = ref([{
			id: 1,
			url: imgurl,
			title: '名字',
			component: '',
			price: '888',
			type: 'xian',
			people: '1232'
		},
		{
			id: 2,
			url: imgurl,
			title: '名字',
			component: '',
			price: '888',
			type: 'ding',
			people: '1232'
		},
		{
			id: 3,
			url: imgurl,
			title: '名字',
			component: '',
			price: '888',
			type: 'ding',
			people: '1232'
		},
		{
			id: 4,
			url: imgurl,
			title: '名字',
			component: '',
			price: '888',
			type: 'ding',
			people: '1232'
		},
		{
			id: 5,
			url: imgurl,
			title: '名字',
			component: '',
			price: '888',
			type: 'ding',
			people: '1232'
		},
		{
			id: 6,
			url: imgurl,
			title: '名字',
			component: '',
			price: '888',
			type: 'ding',
			people: '1232'
		},
	])
	const scrollTop = ref(0)
	const scroll = (e) => {
		// console.log(e);
	}
	// 页面跳转
	const jump = (e) => {
		uni.navigateTo({
			url: '/pages/toy/detail/detail?id=' + e
		})
	}
	
</script>

<style lang="scss" scoped>
	@font-face {
		font-family: zihunbiantaoti;
		src: url('https://gitee.com/yxk756/mogu/raw/main/static/fonts/zihunbiantaoti.ttf');
	}

	@font-face {
		font-family: PingFangSC;
		// src: url('https://gitee.com/yxk756/mogu/raw/main/static/fonts/pingfang.ttf');
		src: url('https://gitee.com/yxk756/mogu/raw/main/static/fonts/pingfang.ttf')
	}
	// 下滑改变背景
	.top-logo-background{
		background-color: #FFFFFF;
		.logo{
			background-size: 100%;
			background-image: url('../../static/logo_b.png') !important;
		}
		
	}
	.container{
		background-color: #F4F5F8;
		.zhezhao{
			// background-color: rebeccapurple;
			position: absolute;
			top: 0;
			width: 750rpx;
			height: 280rpx;
			z-index: 1;
		}
	}
	
	.top-logo{
		// box-sizing: border-box;
		width: 750rpx;
		height: 60rpx;
		position: fixed;
		padding-left: 30rpx;
		// background-color: red;
		// top: 300rpx;
		// 
		z-index: 1;
		.logo {
			width: 146rpx;
			height: 60rpx;
			// background-repeat: cover;
			background-size: 100%;
			background-image: url('../../static/logo.png');
		}
	}
	

	.swiper {
		width: 750rpx;
		height: 750rpx;

		.image {
			width: 750rpx;
			height: 750rpx;
		}

		::v-deep .uni-swiper-dots-horizontal {
			right: 20rpx;
			// bottom: 40rpx;
		}

	}

	.jianbian {
		// background-color: pink;
		background-image: linear-gradient(#00000000, #F4F5F8);
		box-sizing: border-box;
		position: absolute;
		top: 550rpx;
		width: 750rpx;
		height: 204rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		padding: 0 30rpx 20rpx 35rpx;

		.left {
			// background-color: red;
			height: 74rpx;
			display: flex;
			align-items: flex-end;

			.flag {
				font-family: zihunbiantaoti;
				font-size: 42rpx;
				color: #222222;
				height: 74rpx;
				line-height: 40rpx;
				font-style: normal;
				// background-color: pink;
				display: flex;
				align-items: flex-end;
			}

			.num {
				// background-color: green;
				display: flex;
				align-items: flex-end;
				width: 128rpx;
				height: 74rpx;
				font-family: zihunbiantaoti;
				font-size: 62rpx;
				color: #222222;
				line-height: 50rpx;
				font-style: normal;
			}

			.ding {
				// margin-left: 1rpx;
				// background-color: red;
				// width: 90rpx;
				height: 42rpx;
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 30rpx;
				color: #222222;
				line-height: 42rpx;
				font-style: normal;
			}

			.all {
				// background-color: green;
				margin-left: 40rpx;
				width: 150rpx;
				height: 42rpx;
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 30rpx;
				color: #222222;
				line-height: 42rpx;
				text-align: left;
				font-style: normal;
			}


		}



		.right {
			height: 70rpx;
			display: flex;
			align-items: flex-end;
			.select_point {
				width: 34rpx !important;
				background: #000000 !important;
			}
			.point_item {
				width: 14rpx;
				height: 12rpx;
				margin-left: 8rpx;
				// background: red;
				background: rgba(212, 216, 222, 1);
				transform: skew(-20deg);

			}

		}
	}

	.list {
		padding-left: 10rpx;
		padding-right: 30rpx;

		.item {
			margin-left: 20rpx;
			width: 335rpx;
			// height: 483rpx;
			float: left;
			// background-image: url;
			box-sizing: border-box;
			background-color: white;
			margin-top: 50rpx;
			border-radius: 10rpx;

			.desc {
				padding-left: 21rpx;
				width: 294rpx;
				height: 66rpx;
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 24rpx;
				color: #6A6E74;
				line-height: 33rpx;
				text-align: left;
				font-style: normal;
			}

			.bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.want {
					width: 91rpx;
					height: 28rpx;
					font-family: PingFangSC;
					font-weight: 400;
					font-size: 20rpx;
					color: #979A9E;
					line-height: 28rpx;
					text-align: left;
					font-style: normal;
					padding-right: 20rpx;
				}

				.price {
					padding-left: 21rpx;
					height: 32rpx;
					// background-color: red;
					display: flex;
					align-items: center;
					margin-top: 20rpx;
					margin-bottom: 20rpx;

					.num {

						font-family: PingFangSC;
						font-weight: 600;
						font-size: 32rpx;
						color: #222222;
						line-height: 32rpx;
						text-align: left;
						font-style: normal;
					}

					.type {
						margin-left: 6rpx;
						width: 32rpx;
						height: 32rpx;
					}
				}
			}

			.img {
				width: 335rpx;
				height: 335rpx;
			}

		}
	}

	.middle {
		box-sizing: border-box;
		
		display: flex;
		width: 750rpx;
		height: 140rpx;
		// justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;

		font-family: zihunbiantaoti;
		font-size: 32;
		color: #222222;
		line-height: 38rpx;
		font-style: normal;

		:last-child {
			// background-color: red !important;
			margin-left: 20rpx;
		}

		.item {
			// 
			// background-color: green;
			// background-color: whitesmoke;
			width: 335rpx;
			height: 80rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: 38rpx;

			.title {
				width: 103rpx;
				height: 38rpx;
				margin-top: 20rpx;
				margin-left: 20rpx;
				margin-bottom: 22rpx;
			}



			.item-logo {
				width: 69rpx;
				height: 68rpx;
				background-size: cover;
			}

			.rili {
				background-image: url('http://8.137.80.244/mogu/home/ic_date.png');
			}

			.ziyun {

				background-image: url('http://8.137.80.244/mogu/home/ic_news.png');
			}
		}
	}
</style>